<template>
	<div class="mui-content mui-scroll-wrapper" >
		<div class="mui-scroll">
			<div class="mod-container">
				<div class="mod-option" >
						<table class="g-mt8" v-for="v in parameters">
							<tbody>
								<tr>
									<th class="label">
										{{v.groupName}}
									</th>
									<th>注：●标配 ○选配 -无</th>
								</tr>
								<tr v-for="w in v.parameter">
									<td class="label">{{w.name}}</td>
									<td>{{w.content}}</td>
								</tr>
							</tbody>
						</table>
					</table>
				</div>
			</div>
			<!-- 参数空时页面 -->
			<div class="empty" v-if="parameters == null">
			<span class="icon-zanwu-01"></span>
			<span class="empty_text">暂无车型配置</span>
			</div>
		</div>
	</div>
</template>
<script>
	import 'static/js/mui.pullToRefresh.js'
	import 'static/js/mui.pullToRefresh.material.js'
	import { getcarModelDetail } from '@/nodeApi/carDetail'
	import mui from 'static/js/mui'
	import filterMenu from '@/components/base/filter/filter-menu'
	export default {
		data() {
			return {
				carConfig:[],
				parameters:''
			}
		},
		created() {
			this.getParams()
		},
		mounted() {
			mui.init({
				keyEventBind: {
				backbutton: true  //关闭back按键监听
				}
			})
			mui.back = function () {
				history.go(-1)
			}
			//竖向滚动
			scroll =mui('.mui-scroll-wrapper').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: false, //是否显示滚动条
				deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
			});
		},
		components:{},
		methods: {
			getParams() {
				//获取路由参数'
				let routeVal = this.$route.params
				//console.log(routeVal)
				if(JSON.stringify(routeVal)!=="{}"){
				if(typeof(routeVal.carId) !== 'undefined'){
					//console.log({carId:routeVal.carId})
					getcarModelDetail({carId:routeVal.carId}).then(res=>{
						this.parameters = res.data.parameters
					})
				}
				}
			}
		}
	}
</script>
<style scoped>
.mui-bar-nav ~ .mui-content {
    padding:0px;
}
.mod-option {
    background-color: #fff;
    font-size: .6rem;
	padding:0px;
}
.mod-option table {
    width: 100%;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.mod-option th.label {
    color: #ff3034;
    padding-right: 0;
    padding-left: .5rem;
    text-align: left;
}
.mod-option td.label {
    padding-left: .5rem;
}
.mod-option th {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    text-align: right;
    font-weight: 400;
    padding: .3rem .5rem .3rem 0;
}
.mod-option td, .mod-option th {
    background-color: #fff;
    width: 50%;
	
}
/* 页面为空时 */
.empty {
  width: 100%;
  height: 100rem;
  background-color: #fff;
  z-index:2;
  position: relative;
}
.icon-zanwu-01{
  font-size:5rem;
  position: relative;
  display: block;
  text-align: center;
  padding-top:140px;
}
.icon-zanwu-01:before {
  color:#aaaaaa;
}
.empty_text{
  width:100%;
  display: block;
  text-align: center;
  color:#aaaaaa;
  font-size:14px;
}
</style>
